<template>
	<view class="userinfoBox">
		<view :style="{'height': `${statusBarHeight}px`, 'background-color': '#060143'}"></view>
		<uni-nav-bar backgroundColor="#060143;" color="#fff" :title="$t('language.Attendees')" @clickLeft="goBack" left-icon="left"
			:border="false" />
		<view class="logo">
			<image class="logo-ic" src="@/static/logo.png" alt="" />
			<view class="lang-wrap" @click="changeLanguage">
				<image src="../../static/100.png" mode=""></image>
				<text>{{$t('locale.lang')}}</text>
			</view>
		</view>
		<view class="userMSG">
			<view class="title">
				{{$t('language.name') == '中文' ? userInfo.ch_name : userInfo.en_name}}
			</view>
			<view class="userList">
				<view class="leftIcon">
					<image style="width:33upx;height:29upx"
						:src="`${baseUrl}/static/img/userIcon4.png`" mode="heightFix" />{{$t('language.user')}}
				</view>
				<view>{{userInfo.email}}</view>
			</view>
			<view class="userList">
				<view class="leftIcon">
					<image style="width:33upx;height:29upx"
						:src="`${baseUrl}/static/img/userIcon2.png`" mode="heightFix" />{{$t('language.user2')}}
				</view>
				<view class="info">
					{{$t('language.name') == '中文'?userInfo.hotel_name_zh:(userInfo.hotel_code == ''?'': userInfo.hotel_code +' ')  + userInfo.hotel_name}}
				</view>
			</view>
			<view class="userList">
				<view class="leftIcon">
					<image style="width:33upx;height:29upx"
						:src="`${baseUrl}/static/img/userIcon1.png`" mode="heightFix" />{{$t('language.user3')}}
				</view>
				<view class="info" v-if="departArray.length > 0">{{$t('language.name') == '中文' ? departArray[departArrayIndex].cn_title : departArray[departArrayIndex].eu_title}}</view>
			</view>
			<!-- <view class="userList">
				<view class="leftIcon">
					<image style="width:15upx;height:29upx;margin-left:6upx;margin-right:24upx"
						:src="`${baseUrl}/static/img/userIcon3.png`" mode="heightFix" />{{$t('language.user4')}}
				</view>
				<view class="info">{{$t('language.name') == '中文' ? jobArray[jobArrayIndex].cn_title : jobArray[jobArrayIndex].eu_title}}</view>
			</view> -->
		</view>
	</view>
</template>
<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';

	import {
		attendees_info,
		job,
		department
	} from "@/api/user";
	let timer = null
	export default {
		name: "UserInfo",
		data() {
			return {
				baseUrl: HTTP_REQUEST_URL,
				statusBarHeight: 44,
				userid: "",
				evenId: '',
				userInfo: '',
				departArray: [],
				departArrayIndex: 0,
				jobArray: [],
				jobArrayIndex: 0
			};
		},
		onLoad(o) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			let evenId = o.evenId;
			this.evenId = evenId;
			this.userid = o.userid;
			this.getDepartment()
			// this.getJob()
			this.getUserInfo();
		},
		created() {},
		methods: {
			getJob() {
				job({
					event_id: this.evenId
				}).then(
					res => {
						this.jobArray = res.data
					},
					err => {
						console.log(err)
					}
				);
			},
			getDepartment() {
				department({
					event_id: this.evenId
				}).then(
					res => {
						this.departArray = res.data
						console.log(res.data)
					},
					err => {
						console.log(err)
					}
				);
			},
			async getUserInfo() {
				const response = await attendees_info({
					event_id: this.evenId,
					user_id: this.userid
				})
				if (response.code == 200) {
					this.userInfo = response.data
					let { depart, job_id } = response.data
					let _departArray = this.departArray
					_departArray.forEach((item, i) => {
						if (item.id == depart) {
							this.departArrayIndex = i;
						}
					})
					
					// this.jobArray.forEach((item, i) => {
					// 	if (item.id == job_id) {
					// 		this.jobArrayIndex = i;
					// 	}
					// })
				} else {
					console.log(response.msg);
				}
			},
			goBack() {
				uni.navigateBack()
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					uni.setStorageSync('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					uni.setStorageSync('locale', 'zh')
				}
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #050033;
	}

	.logo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 30upx;
		color: #fff;
		background-color: #060143;
	
		.logo-ic {
			width: 78upx;
			height: 64upx;
		}
	
		.lang-wrap {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 24upx;
	
			image {
				width: 30upx;
				height: 30upx;
				margin-right: 12upx;
			}
		}
	}

	

	.userMSG {
		width: 690upx;
		margin: 30upx auto 0;
		border-radius: 16upx;
		background: #060143;
		overflow: hidden;
		.title {
			font-size: 36upx;
			color: #fff;
			padding-top: 30upx;
			padding-left: 28upx;
			box-sizing: border-box;
		}
	}

	.userList {
		height: 110upx;
		border-bottom: 1upx solid #1c1853;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30upx;
		color: #fff;
		&:last-child {
			border-bottom: none;
		}
	}

	.userList view:last-child {
		text-align: right;
	}

	.leftIcon {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 110upx;
		min-width: 120upx;
	}
	.leftIcon image {
		margin-right: 16upx;
	}

	.manorwuman {
		position: absolute;
		left: 384upx;
		top: 130upx;
		width: 40upx;
		height: 40upx;
		background: #eee;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.manorwuman image {
		width: 20upx;
		height: 20upx;
	}
</style>